This page intends to visualise how different color models available in the CSS Color specification, including the Level 4 draft, is rendered and perceived in the browser. This page is still a work in progress.
Note! Parts of this page will, as of January 2022, only render correctly in Safari.
The HSL color model is an alternative way to specify a RGB color, with the intention of making it more relatable to how we as humans perceive and relate to color. The color appearance of HSL values in the browser are render in the sRGB color space. Unfortunately, because of the way un-uniformity of sRGB, similar HSL lightness values (L) are not always perceived as equality bright.
Click the color patch to copy it's color value to the clipboard.
The Lab (or rather CIE Lab) color model aims to define all colors within the human visual system, and to harmonise numeric color value changes with the perceived color change. Colors with equal L (lightness) values should appear equally light, independent of the hue or saturation of the color. The ability to use Lab color values in the browser is still a draft in the CSS specification and as of today only implemented in the Safari web browser.
Click the color patch to copy it's color value to the clipboard.
The LCh (well CIE LCh to be correct) is a sibling to Lab where color values are defined with Lightness (L), Chroma (C) and Hue (h). If you move the Chroma you should see that the chroma (or saturation) of the colors will change, but the lightness and hue will be consistent. The LCh color modell is also a draft the CSS specs only implemented in the Safari web browser.
Click the color patch to copy it's color value to the clipboard.